<template>
	<view class="paytype">
		<view class="shop_info">
			<text>{{shopDetail.name}}</text>
			<text class="price" v-if="payprice">￥{{payprice}}</text>
			<text class="price" v-else>￥{{shopDetail.tail_price}}</text>
		</view>
		<view class="balance_info">
			<radio-group @change="radioChange">
				<label>
					<view class="pay_select">
						<text class="balance_text">
							账户金额（余额：{{userinfo.user_account}} ，红包：{{userinfo.user_red}}）
						</text>
						<radio value="1" checked="true" />
					</view>
				</label>
				<text class="charge_txt" @click="goCharge" v-if="isCharge">去充值</text>

				<label v-if="Number(payprice) > 0">
					<view class="pay_select">
						<view class="wechat_pay">
							<image class="wechat_icon" :src="IMGLink+'/my/wechat_icon.png'" mode="widthFix">
							</image>
							<text>微信支付</text>
						</view>
						<radio value="2" />
					</view>
				</label>
			</radio-group>
		</view>
		<button type="default" size="mini" class="operate_btn" @click="confirmPay">确认付款</button>
		<pwdmodal :reset="reset" ref="showModal" :payprice="payprice" @isPassword="isPassword"></pwdmodal>

		<uni-popup ref="setpwdPop" type="bottom" :mask-click="true">
			<pwdinfo @closeSetpwdPop="closeSetpwdPop"></pwdinfo>
		</uni-popup>
	</view>
</template>

<script>
	import {
		orderlist
	} from '@/api/my/orders.js';
	import {
		pays
	} from "@/api/my/my.js";
	import {
		mapState,
	} from 'vuex';
	import pwdmodal from "../../components/pwdModal.vue";
	import pwdinfo from "../../components/pwdInfo.vue";
	export default {
		components: {
			pwdmodal,
			pwdinfo
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				shopDetail: {},

				serial_num: "", //订单id
				address_id: "", //地址id
				coupon_id: "",
				payprice: "", //支付金额（除去优惠券额度等）
				payType: "1", //支付类型：余额（1）还是微信支付（2）
				reset: false,
				showModal: false,
				password: "",
				IS_WEIXIN: false,

			}
		},
		computed: {
			...mapState(['userinfo']),
			isCharge() {
				if ((Number(this.userinfo.user_account) + Number(this.userinfo.user_red)) * 100 / 100 < this.payprice) {
					return true;
				}
				return false;
			}
		},
		watch: {

		},
		created() {},

		onLoad(options) {
			this.serial_num = options.serial_num;
			this.address_id = options.address_id;
			this.coupon_id = JSON.parse(options.coupon_id);
			this.payprice = options.payprice;
			this.$store.commit("setPayback", null);

			//#ifdef MP-WEIXIN
			this.IS_WEIXIN = true;
			//#endif
		},
		onShow() {
			this.getDetail();
			this.$nextTick(() => {
				this.$refs.showModal.init(false);
				this.closeSetpwdPop();
			})
		},
		methods: {
			isPassword(data) {
				this.password = data;
				this.doPay();
			},
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				orderlist('orderinfo', {
					serial_num: this.serial_num
				}).then(res => {
					this.shopDetail = res.data;
					uni.hideLoading();
					if (this.shopDetail.status != '1') {
						uni.switchTab({
							url: `/pages/my/my`
						})
					}
				}).catch(error => {
					uni.hideLoading();
				})
			},

			radioChange(evt) {
				this.payType = evt.target.value;
			},

			// 确认付款
			confirmPay() {
				if (this.payType == '1') { //余额支付
					if (this.userinfo.pay_password) { //是否设置支付密码
						// 判断余额是否足够
						if ((Number(this.userinfo.user_account) + Number(this.userinfo.user_red)) * 100 / 100 < Number(this
								.payprice)) {
							this.$Toast.none('红包余额不足，请选择其他支付方式！')
						} else {
							this.reset = true;
							this.$refs.showModal.init("true");
						}
					} else {
						this.openCoup();

					}
				} else { //微信支付
					this.wechatPay();
				}
			},
			openCoup() {
				this.$refs.setpwdPop.open('center');
			},
			closeSetpwdPop() {
				this.$refs.setpwdPop.close();
			},

			// 微信支付
			wechatPay() {
				uni.showLoading({
					title: '加载中..'
				})
				let type = this.IS_WEIXIN ? 1 : 2;
				let domain = window.location.origin;
				let back_url = `${domain}/#/pagesA/my/orders/paySuccess?serial_num=${this.serial_num}`; //支付成功回掉地址
				pays('wechatPay', {
					serial_num: this.serial_num,
					address_id: this.address_id,
					coupon_id: this.coupon_id,
					password: this.password,
					type: type,
					return_url: back_url
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						if (this.IS_WEIXIN) {
							uni.navigateTo({
								url: '/pages/pay/pay-webview?payUrl=' + encodeURIComponent(res.data.payUrl)
							});
							this.$store.commit("setPayback", 4);
						} else {
							location.href = res.data.payUrl;
						}
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},

			// 余额支付
			doPay() {
				uni.showLoading({
					title: '支付确认中'
				});
				pays('balancePay', {
					serial_num: this.serial_num,
					address_id: this.address_id,
					coupon_id: this.coupon_id,
					password: this.password
				}).then(res => {
					if (res.code == 200) {
						let orderid = res.data.serial_num;
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: `支付成功`
						});

						setTimeout(_ => {
							uni.navigateTo({
								url: `/pagesA/my/orders/paySuccess?serial_num=${orderid}&payprice=${this.payprice}`
							})
						}, 1000);

						this.$store.dispatch("updateUserInfo")
					} else {
						this.reset = true;
					}
				}).catch(error => {
					// uni.hideLoading();
				})
			},
			// 去充值
			goCharge() {
				uni.navigateTo({
					url: "/pagesA/my/account/charge"
				})
			},
		}
	}
</script>

<style>
	page {
		height: 100vh;
		overflow: hidden;
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import '../my.scss';

	.paytype {

		.shop_info {
			height: 400rpx;
			@include flexLayout(center, center);
			flex-direction: column;
			color: #0B0B0D;
			font-size: 24rpx;
			padding: 0 30rpx;

			.price {
				color: #0B0B0D;
				font-size: 36rpx;
				margin-top: 60rpx;
				font-weight: 500;
			}
		}

		.balance_info {
			@include cards;
			background-color: #FFFFFF;
			padding: 10rpx 30rpx 40rpx;

			.pay_select {
				@include flexLayout(center, space-between);
				margin-top: 30rpx;

				.balance_text {
					color: #0B0B0D;
					font-size: 28rpx;
					font-weight: 500;
					margin-right: 40rpx;
				}

				.wechat_icon {
					width: 44rpx;
					margin-right: 12rpx;
					margin-bottom: -10rpx;
				}

				.wechat_pay {
					color: #242424;
					font-size: 32rpx;
				}
			}

			.charge_txt {
				font-size: 24rpx;
				color: #84B065;
				text-decoration: underline;
			}

			/deep/ uni-radio .uni-radio-input-checked {
				background-color: #F54642 !important;
				border-color: transparent !important;
			}
		}

		.operate_btn {
			width: 90%;
			height: 82rpx;
			line-height: 82rpx;
			margin: 160rpx 5%;
			background-color: #F54642;
			border-radius: 48rpx;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}
</style>
